import { Moon, Sun } from "lucide-react";
// import ThemeToggle from "./components/ThemeToggle";
import { ModeToggleLite } from "./components/mode-toggle";

function App() {
  return (
    <div className="sapce-y-4 mx-auto max-w-xl py-4">
      {/* <ThemeToggle /> */}
      <ModeToggleLite className="inline-flex rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-900">
        <Sun
          size={20}
          className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
        />
        <Moon
          size={20}
          className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
        />
      </ModeToggleLite>
      <div>
        <h1 className="py-2 text-xl font-bold">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, magni.
        </h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint enim
          impedit qui omnis cumque corporis reprehenderit similique quae fugiat
          magni aut suscipit ducimus vel magnam, officiis alias minus ut!
          Quisquam maiores et saepe omnis magni similique quidem cum dolor unde,
          dicta rerum provident illum molestiae vitae minus iure id debitis!
        </p>
      </div>
    </div>
  );
}

export default App;
